<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
          <!-- 输入框 -->
          <el-form-item label="操作人: ">
            <el-input v-model="searchFilters.creatorName" placeholder="操作人"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 左侧查询重置  右侧刷新 导出部分 -->
      <div class="tool-wrap">
        <div class="left-area">
          <el-button-group>
            <el-button type="primary" size="small" @click="queryData('searchFilters')">查询</el-button>
            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
            <!-- <el-button type="primary" size="small" @click="add()">新增弹窗按钮</el-button> -->
          </el-button-group>
        </div>
        <div class="right-area">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button  size="small" icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button  size="small" icon="fa fa-filter" @click="tabulate"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button  size="small" icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
        <jic-table
          :height="350"
          :operationWidth= 400
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showEditOperation=false
          :showDeleteOperation=false
          :showDetailOperation=true
          :showCustomOperation=false
          :showIndex=false
          :showSelection=false
          :showOperation=true
          @findPage="findPage"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          @handleDetail="handleDetail"
          ref="jicTable"
        ></jic-table>
      </div>
      <div class="dialog-wrap">
        <el-dialog
          width="50%"
          title="弹窗名称"
          :visible.sync="dialogVisible"
          :before-close="handleClose">
          <!-- 自定义页面内容开始 -->
            <el-form
                :model="dataForm"
                ref="dataForm"
                label-width="100px"
                size="small"
                style="text-align:left;"
            >
                <el-form-item label="操作角色名: ">
                  {{dataForm.roleName}}
                </el-form-item>
                <el-form-item label="操作内容: ">
                  {{dataForm.content}}
                </el-form-item>
                <el-form-item label="操作人: ">
                  {{dataForm.creatorName}}
                </el-form-item>
                <el-form-item label="操作时间: ">
                  {{dataForm.createTime}}
                </el-form-item>
            </el-form>

          <span slot="footer" class="dialog-footer">
            <!-- <el-button size="small" @click="dialogVisible = false">取 消</el-button> -->
            <el-button size="small" type="primary" @click="dialogVisible = false">关 闭</el-button>
          </span>
          <!-- 自定义页面内容结束 -->
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  // 引入资源
  import jicTable from '@/components/jicComponentGallery/jicTable';      // 引入表格组件
  export default {
    // 注册组件
    components: {
      jicTable
    },
    data(){
      return {
        dataForm:{},
        totalSize: 0,                                // 返回数据总条数
        pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
        tableList: [],                               // 表格列表数据
        searchSize: 'mini',                          // 用于控制该表单域下组件的尺寸   可选值为medium(中等)  small(小号)   mini(最小号) 、
        // 表格表头数据
        tableHeaderList: [
        //   { prop: "id", label: "ID", minWidth: 50 },
          { prop: "roleName", label: "操作角色名", minWidth: 120 },
          { prop: "content", label: "操作内容", minWidth: 120 ,formatter:function(row, column, cellValue, index){
              return cellValue.substr(0,80)+"...";
          }},
          { prop: "creatorName", label: "操作人", minWidth: 120 },
          { prop: "createTime", label: "操作时间", minWidth: 120 }
        ],
        searchFilters: {
        },
        dialogVisible: false
      }
    },
    methods: {
      // 请求列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters == undefined || this_.searchFilters == null) {
          this_.searchFilters = {};
        }
        this_.searchFilters.start = this.pageRequest.pageNum;
        this_.searchFilters.limit = this.pageRequest.pageSize;
        this.utils.request.getSysRoleLogPageList(this_.searchFilters, function (res) {
          this_.tableList = res.data.rows;
          this_.totalSize = Number(res.data.total);
        }); 
      },
      // 查询
      queryData() {
        this.findPage();
      },

      // 重置
      resetForm() {
        if(this.$refs["searchFilters"] != undefined){
            this.$refs["searchFilters"].resetFields();
        }
        this.findPage();
      },

      // 列表显示
      tabulate() {
        alert('列表显示');
      },

      // 导出数据
      downloadExcel() {
        alert('导出数据');
      },
      // 详情按钮对应的方法
      handleDetail(params) {
        this.dataForm = params.row;
        this.dialogVisible = true;
      },

      // 请求条数发生变化
      handleSizeChange(params) {
        console.log(params.size, '-------------父页面请求条数发生变化------------');
        this.pageRequest.pageSize = params.size;
        this.findPage();
      },

      // 请求页数发生变化
      handlePageChange(params) {
        console.log(params.number, '-------------父页面请求页数发生变化------------');
        this.pageRequest.pageNum = params.number
        this.findPage();
      },
      // 关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

    },

    // dom元素绑定后再执行初始化数据操作
    mounted() {
      // 初始化请求数据
      this.findPage();
    }, 
    
  }
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */ 
  .common-content {
    padding: 10px;
    box-sizing: border-box;
    .search-wrap /deep/ {
      .el-form-item__label{
        height: 32px;
        line-height: 32px;
      }
      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }
      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }
    /* 多日期样式重置 */ 
    .el-dater /deep/ .el-form-item__content{
      width: 330px;
    }
    /* 通用工具部分样式 */ 
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;
      .left-area {
        float: left;
        width: 50%;
        text-align: left;
        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }
      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }
    /* 表格部分样式 */ 
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }
    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer{
      text-align: center !important;
    } 
  }
</style>

